import {Modal, Button, Form, Input, Row, Col, Radio} from 'antd'
import UploadImg from '../../addGoods/components/uploadImg'
import http from '../../../../utils/http'
import React, {useState, useEffect} from 'react'

// 模态框
const Modify = (props) => {

  const {operat = 2, getData, data, isModalVisible = false, setIsModalVisible, title, record = {}} = props // operat  0为添加二级分类 1为编辑 2为添加一级分类, classify为1是一级分类，2是二级分类数据
  const [form] = Form.useForm()

  // 添加一级分类
  const addCategory1 = async (data) => {
    // 添加
    console.log(operat)
    await http({
      url: '/huangyi/addCategory1',
      method: 'post',
      data,
    }).then(res => {
      console.log(res)

    })

    getData()
  }

  // 添加二级分类
  const addCategory2 = async (data) => {
    await http({
      url: '/huangyi/addCategory2',
      method: 'post',
      data: {
        ...data,
        id: record.id
      }
    }).then(res => {
      console.log(res)
    })
    getData()
  }

  // 编辑分类
  const editCategory1 = (data) => {
    // 编辑一级分类
    console.log(record.classify, 22)
    if (record.classify === 1) {
      http({
        url: '/huangyi/editCategory1',
        method: 'post',
        data: {
          ...data,
          id: record.id
        }

      }).then(res => {
        console.log(res)
        getData()
      })
    } else {
      // 编辑二级分类
      http({
        url: '/huangyi/editCategory2',
        method: 'post',
        data: {
          ...data,
          id: record.id
        }

      }).then(res => {
        console.log(res)
        getData()
      })

    }
  }

  // 模态框确定
  const handleOk = () => {
    let data = form.getFieldsValue()
    switch (operat) {
      case 2:
        addCategory1(data)
        break
      case 0:
        addCategory2(data)
        break
      case 1:
        editCategory1(data)
        break

      default:
        break
    }
    setIsModalVisible(false)
    console.log(form.getFieldsValue())
    form.resetFields()
  }

  // 模态框取消
  const handleCancel = () => {
    form.resetFields()
    setIsModalVisible(false)
  }

  // 修改模态框的值
  useEffect(() => {
    console.log(operat, 111)
    let obj = {}
    if (operat === 1 || operat === 0) {
      if (record.classify === 1) {
        obj.name1 = record.name
        obj.image_url1 = record.image_url
        obj.name2 = ''
        obj.image_url2 = ''
      } else {
        data.forEach(v => {
          if (v.id === record.goods_classify_id) {
            obj.name1 = v.name
            obj.image_url1 = v.image_url
          }
        })
        obj.name2 = record.name
        obj.image_url2 = record.image_url
      }

    } else {
      obj.name1 = ''
      obj.image_url1 = ''
    }
    form.setFieldsValue(obj)
  }, [isModalVisible])

  return (
    <>
      <Modal destroyOnClose width='620px' title={title} visible={isModalVisible} cancelText="取消" okText="保存" onOk={handleOk} onCancel={handleCancel}>
        <Form
          labelAlign="center"
          form={form}
          labelCol={{span: 8}}
          wrapperCol={{span: 16}}
        >
          <Row>
            <Col>
              <Form.Item label="一级分类" name='name1'>
                <Input disabled={(record.classify === 1 && operat === 1) || operat === 2 ? false : true} placeholder="请输入主分类名称" suffix="0/10" />
              </Form.Item>
            </Col>
            <Col offset={1}>
              <Form.Item name='image_url1' valuePropName="fileList1"
                className="categoryList_upload"
                wrapperCol={{span: 24}}
              >
                <UploadImg introduction="图片：" name="file" modifytype={operat === 2 || (operat === 2 && (record.classify === 1 && operat !== 1)) ? '' : 1} ></UploadImg>
              </Form.Item>
            </Col>
          </Row>
          <Row style={{display: operat === 2 || (record.classify === 1 && operat === 1) ? 'none' : ''}}>
            <Col>
              <Form.Item label="二级分类" name='name2'>
                <Input placeholder="请输入子分类名称" suffix="0/10" />
              </Form.Item>
            </Col>
            <Col offset={1}>
              <Form.Item name='image_url2' valuePropName="fileList1"
                className="categoryList_upload"
                wrapperCol={{span: 24}}
              >
                <UploadImg introduction="图片：" name="file" modifytype={operat === 2 || operat === 0 ? 0 : 1} ></UploadImg>
              </Form.Item>
            </Col>
          </Row>

          <Form.Item label="状态" name='state' labelCol={{span: 4}} initialValue={1}>
            <Radio.Group>
              <Radio value={1}>显示</Radio>
              <Radio value={0}>隐藏</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

export default Modify